import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, TouchableHighlight } from 'react-native';
import { ViewPropTypes } from './config';
import Collapsible from './Collapsible';

const COLLAPSIBLE_PROPS = Object.keys(Collapsible.propTypes);
const VIEW_PROPS = Object.keys(ViewPropTypes);

export default class Accordion extends Component {
  static propTypes = {
    sections: PropTypes.array.isRequired,
    renderHeader: PropTypes.func.isRequired,
    renderContent: PropTypes.func.isRequired,
    onChange: PropTypes.func,
    align: PropTypes.oneOf(['top', 'center', 'bottom']),
    duration: PropTypes.number,
    easing: PropTypes.string,
    initiallyActiveSection: PropTypes.number,
    activeSection: PropTypes.oneOfType([
      PropTypes.bool, // if false, closes all sections
      PropTypes.number, // sets index of section to open
    ]),
    underlayColor: PropTypes.string,
    touchableComponent: PropTypes.func,
    touchableProps: PropTypes.object,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    underlayColor: 'black',
    disabled: false,
    touchableComponent: TouchableHighlight,
  };

  constructor(props) {
    super(props);

    this.state = {
      prevPropsActiveSection:
          props.activeSection !== undefined
              ? props.activeSection
              : props.initiallyActiveSection,
      activeSection:
          props.activeSection !== undefined
              ? props.activeSection
              : props.initiallyActiveSection,
        statusArr:[]
    };
    let len=this.props.sections.length;
    for(var i=0;i<len;i++){
        if(i==this.state.activeSection){
            this.state.statusArr.push(false)
        }else{
            this.state.statusArr.push(true)
        }

    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (('activeSection' in nextProps) && (nextProps.activeSection !== prevState.prevPropsActiveSection)) {
        return {
          prevPropsActiveSection: nextProps.activeSection,
          activeSection: nextProps.activeSection,
        };
    }
    return null;
  }

  _toggleSection(section) {
    if (!this.props.disabled) {
      const activeSection =
        this.state.activeSection === section ? false : section;
	this.state.statusArr[section]=!this.state.statusArr[section];
      if (this.props.activeSection === undefined) {
        this.setState({ activeSection });
      }
      if (this.props.onChange) {
        this.props.onChange(activeSection);
      }
    }
  }

  render() {
    let viewProps = {};
    let collapsibleProps = {};
    Object.keys(this.props).forEach(key => {
      if (COLLAPSIBLE_PROPS.indexOf(key) !== -1) {
        collapsibleProps[key] = this.props[key];
      } else if (VIEW_PROPS.indexOf(key) !== -1) {
        viewProps[key] = this.props[key];
      }
    });

    const Touchable = this.props.touchableComponent;
    const marginTop=this.props.marginTop
    const contentColor=this.props.contentColor
    return (
      <View {...viewProps}>
        {this.props.sections.map((section, key) => (
          <View key={key} style={{backgroundColor:contentColor,marginBottom:marginTop}}>
            <Touchable
              onPress={() => this._toggleSection(key)}
              underlayColor={this.props.underlayColor}
              {...this.props.touchableProps}
            >
              {this.props.renderHeader(
                section,
                key,
                this.props.hasAccording?this.state.activeSection === key:this.state.statusArr[key],
                this.props.sections
              )}
            </Touchable>
            <Collapsible
              collapsed={this.props.hasAccording?this.state.activeSection !== key:this.state.statusArr[key]}
              {...collapsibleProps}
            >
              {this.props.renderContent(
                section,
                key,
                this.state.activeSection === key,
                this.props.sections
              )}
            </Collapsible>
            <Touchable
                onPress={() => this._toggleSection(key)}
                underlayColor={this.props.underlayColor}
                {...this.props.touchableProps}
                >
              {this.props.renderImg(
                  section,
                  key,
                  this.props.hasAccording?this.state.activeSection === key:this.state.statusArr[key]
              )}
            </Touchable>
          </View>
        ))}
      </View>
    );
  }
}
